import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index.js'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 再次说明：
    // 1. path 以 / 开头表示绝对路径，最终访问地址就是这个
    // 2. path 不以 / 开头表示相对路径，最终访问地址是需要带上父路由的 path 的
    // 3. 能写绝对路径，就优先写

    // 登录
    { name: 'LoginPage', path: '/login', component: () => import('@/views/login/index.vue') },

    // 布局，首页架子
    {
      name: 'LayoutPage',
      path: '/',
      component: () => import('@/views/layout/index.vue'),
      redirect: { name: 'DashboardPage' },
      children: [
        // 数据看板
        { name: 'DashboardPage', path: '/dashboard', component: () => import('@/views/dashboard/index.vue') },
        // 面经文章管理
        { name: 'ArticlePage', path: '/article', component: () => import('@/views/article/index.vue') }
      ]
    }

  ]
})

// name 的形式
const whiteList = ['LoginPage']

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  // const token = store.state.user.token
  const { token } = store.state.user
  // 如果有 token，不用管，直接放行
  if (token) return next()

  // 如果没 token，但是在白名单中，也不用管，直接放行
  if (whiteList.includes(to.name)) return next()

  // 否则，既没有 token，也不在白名单中，直接去登录
  next({ name: 'LoginPage' })
})

export default router
